<!--
 * @Descripttion: 普通表单组件 --- 用于编辑，不涉及数据的请求
 * @version: 1.0
 * @Author: lsy
 * @Date: 2023年2月10日09:25:07
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-20 13:09:24
-->

<template>
  <el-form
    class="scBasicForm"
    ref="formRef"
    :model="model"
    :rules="rules"
    v-bind="{
      ...$attrs,
    }"
  >
    <el-row >
      <slot name="header"></slot>  
    </el-row>
    <el-row v-if="formItems.length" type="flex" class="body-row">
      <el-col
        v-for="(formItem, index) in formItems"
        :span="formItem.span || 24"
        :key="index"
      >
        <el-form-item :label="`${formItem.label}:`" v-bind="formItem.itemAttr || {}" :prop="formItem.prop">
          <basic-form-item
            style="width: 100%"
            :column="formItem"
            :prop="formItem.prop"
            :model="model"
            :key="formItem.prop"
          >
            <template v-if="formItem.slot" v-slot:[formItem.slot]="data">
            <slot :name="formItem.slot" v-bind="data"></slot>
            </template>
          </basic-form-item>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="footer-row">
      <slot name="footer"></slot>  
    </el-row>
  </el-form>
</template>

<script setup>
import { defineProps, defineExpose, ref } from "vue";
import BasicFormItem from './item.vue';

const props = defineProps({
  model: {
    type: Object,
    default: () => ({}),
  },
  rules: {
    type: Object,
    default: () => ({}),
  },
  formItems: {
    type: Array,
    default: () => [],
  },
});
const formRef = ref(null);
// 校验
const validate = ({success, error}) => {
  if (formRef.value) {
    formRef.value.validate((valid) => {
      if (valid) {
        success && success();
      } else {
        error && error()
        return false;
      }
    });
  }
}
// 清除校验
const clearValidate = () => {
	if (formRef.value) {
		formRef.value.clearValidate()
	}
}

defineExpose({
  validate,
  clearValidate
})
</script>

<style lang="scss" scoped>
</style>
